<template>
  <div class="app-container">
    <el-form ref="formRef" :model="form" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="计划编号" prop="planCode">
            {{ form.planCode }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="计划名称" prop="planName">
            {{ form.planName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工厂" prop="factoryName">
            {{ form.factoryName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工段" prop="workshopName">
            {{ form.workshopName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产线" prop="productLineName">
            {{ form.productLineName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工艺段" prop="sectionName">
            {{ form.sectionName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="开始日期" prop="startDate">
            {{ form.startDate }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="结束日期" prop="endDate">
            {{ form.endDate }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="轮班方式" prop="classesMode">
            <span v-if="form.classesMode == 1">一班</span>
            <span v-if="form.classesMode == 2">两班倒</span>
            <span v-if="form.classesMode == 3">三班倒</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="倒班方式" prop="changeShiftsMode">
            <span v-if="form.changeShiftsMode == 1">每{{ form.cycle }}周</span>
            <span v-if="form.changeShiftsMode == 2">每{{ form.cycle }}天</span>
            <span v-if="form.changeShiftsMode == 3">每{{ form.cycle }}月</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="班组" prop="planScheduleGroupNames">
            {{ form.planScheduleGroupNames }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            {{ form.remark }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="班次" name="first">
        <el-table :data="classesModeList" border>
          <el-table-column prop="scheduleName" label="班次" width=""></el-table-column>
          <el-table-column prop="startTime" label="开始时间" width=""></el-table-column>
          <el-table-column prop="endTime" label="结束时间"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="班组成员" name="second">
        <el-table :data="workGroupList" border>
          <el-table-column prop="workGroupName" label="班组" width="" />
          <el-table-column prop="userName" label="用户名" width="" />
          <el-table-column prop="nickName" label="姓名" width="" />
          <el-table-column prop="phonenumber" label="手机号" width="" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="Data">
import { getShiftSchedule } from "@/api/base/plan/shiftMgt/shiftPlan";
import { listShift } from "@/api/base/plan/shiftMgt/shiftMaintenance";

import { ref, toRefs, reactive, useAttrs, onMounted } from "vue";

const attrs = useAttrs();
const data = reactive({
  form: {},
});
const classesModeList = ref([]);
const workGroupList = ref([]);
const activeName = ref("first");
const formRef = ref(null);
const { form } = toRefs(data);

const emit = defineEmits(["close", "setTitle", "setActions", "setIsActionTop"]);
const actions = ref([
  {
    text: "取 消",
    theme: "",
    handle: () => {
      cancel();
    },
  },
]);

function getDetail(id) {
  reset();
  getShiftSchedule(id).then((res) => {
    form.value = res.data;
    // const ids = res.data.planScheduleGroupList.map((el) => el.workStationStaff);
    workGroupList.value = res.data.scheduleGroupUserList;
    form.value.planScheduleGroupNames = res.data.planScheduleGroupList
      .map((item) => item.workGroupName)
      .toString();
    getListShift();
  });
}

function getListShift() {
  const params = {
    classesCode: form.value.classesCode,
    pageNum: 1,
    pageSize: 999,
  };
  listShift(params).then((res) => {
    classesModeList.value = res.rows[0].planClassesScheduleList;
  });
}

/** 表单重置 */
function reset() {
  form.value = {
    name: undefined,
    type: undefined,
    equipNo: undefined,
    model: undefined,
    factory: undefined,
    segmentCode: undefined,
    workshopCode: undefined,
    status: undefined,
    remark: undefined,
  };
  formRef.value.resetFields();
}
function cancel() {
  emit("close");
}
onMounted(async () => {
  const { data } = attrs;
  getDetail(data.id);
  actions.value = [
    {
      text: "取 消",
      theme: "",
      handle: () => {
        cancel();
      },
    },
  ];
  emit("setActions", actions.value);
});
</script>
